<template>
    <div class="app-container">
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" top="80px"
            @closed="$emit('close')">

            <el-form class="el-form el-form--label-right">
                <div class="el-form-item el-form-item--medium">
                    <label for="orderNumber" class="el-form-item__label" style="width: 120px;">活动开始时间</label>
                    <div class="el-form-item__content" style="margin-left: 120px;">
                        <el-date-picker v-model=formData.couponStartTime type="datetime" placeholder="请选择活动开始时间"
                            :readonly="showNoSee" style="max-width: 300px;width: 100%;"></el-date-picker>
                    </div>
                    <br>
                    <label for="orderNumber" class="el-form-item__label" style="width: 120px;">活动结束时间</label>
                    <div class="el-form-item__content" style="margin-left: 120px;">
                        <el-date-picker v-model=formData.couponEndTime type="datetime" placeholder="请选择活动结束时间"
                            :readonly="showNoSee" style="max-width: 300px;width: 100%;"></el-date-picker>
                    </div>
                </div>
            </el-form>
            <x-form ref="xForm" v-model="formData" v-loading="loading" :config="formConfig" />
        </el-dialog>
    </div>
</template>
  
<script>
import { addOrUpdateCoupon, getCouponDetail } from '@/api/coupon'
import { getToken } from '@/utils/auth'
import { importDic } from '../../utils'
import { importRules } from '@/utils/index'

export default {
    props: {
        mode: {
            type: String,
            required: true
        },
        id: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            dialogTitle: '编辑',
            dialogVisible: true,
            formDisabled: false,
            loading: 0,
            showBtn: true,
            formData: {},
            showNoSee: false,
            showNoAddSee: false
        }
    },
    computed: {
        formConfig() {
            const _this = this

            return {
                // disabled: _this.formDisabled,
                inline: false,
                // hideRequiredAsterisk: false,
                item: [
                    { xType: 'input', name: 'couponName', label: '优惠券名称', rules: importRules('inputRequired'), readonly: _this.formDisabled },
                    { xType: 'select', name: 'couponType', label: '优惠券类型', rules: importRules('inputRequired'), dic: importDic('couponType'), show: this.showBtn },
                    { xType: 'input', name: 'details', label: '优惠券描述', readonly: _this.formDisabled },
                    { xType: 'input', name: 'startPay', label: '起始金额', readonly: _this.formDisabled },
                    { xType: 'input', name: 'couponDiscount', label: '活动力度', readonly: _this.formDisabled },
                    { xType: 'input', name: 'needPoints', label: '需要积分', readonly: _this.formDisabled },
                    // { xType: 'input', name: 'couponBy', label: '优惠券发起人', show:this.showNoSee },
                    // { xType: 'input', name: 'examine', label: '优惠券审核人', show:this.showNoSee },
                    // { xType: 'select', name: 'examineStatus', label: '审核状态', dic:importDic('couponExamineStatus'), show:this.showNoAddSee },
                    // { xType: 'input', name: 'createBy', label: '创建人', show: _this.showNoSee },
                    // { xType: 'input', name: 'createTime', label: '创建时间', show: _this.showNoSee },
                    // { xType: 'input', name: 'updateBy', label: '更新人', show: _this.showNoSee },
                    // { xType: 'input', name: 'updateTime', label: '更新时间', show: _this.showNoSee },
                ],
                operate: [
                    { text: '保存', show: _this.showBtn, click: _this.addOrUpdateCoupon },
                    { text: '取消', show: _this.showBtn, click: () => { _this.dialogVisible = false } }
                ]
            }
        }
    },
    watch: {
        mode: {
            handler: function (mode) {
                if (this.mode === 'add') {
                    this.dialogTitle = '新建'
                }
                if (this.mode === 'edit') {
                    this.dialogTitle = '编辑'
                    this.getCouponDetail()
                    this.showNoAddSee = true
                }
                if (this.mode === 'detail') {
                    this.dialogTitle = '详情'
                    this.getCouponDetail()
                    this.formDisabled = true
                    this.showBtn = false
                    this.showNoSee = true
                    this.conTop = '1vh'
                    this.showNoAddSee = true
                }
            },
            immediate: true
        }
    },
    methods: {
        getCouponDetail() {
            this.loading++
            getCouponDetail(this.id, getToken()).then(res => {
                console.log('getCouponDetail' + res.result)
                this.formData = res.result
            }).catch(e => console.error(e)).finally(() => this.loading--)
        },
        addOrUpdateCoupon() {
            if (this.formData.couponStartTime > this.formData.couponEndTime) {
                this.$message.error("开始时间不能大于结束时间！")
                return
            }
            this.$refs['xForm'].validate().then(() => {
                this.loading++;

                if (this.formData.couponStartTime > new Date()) {
                    this.formData.couponStatus = 0
                } else if (this.formData.couponStartTime < new Date() && this.formData.couponEndTime > new Date()) {
                    this.formData.couponStatus = 1
                } else {
                    this.formData.couponStatus = 2
                }
                this.formData.couponStartTime = new Date(this.formData.couponStartTime + 'GMT')
                this.formData.couponEndTime = new Date(this.formData.couponEndTime + 'GMT')
                addOrUpdateCoupon(this.formData, getToken()).then(res => {
                    console.log('addOrUpdateCoupon' + res)
                    this.dialogVisible = false
                    this.$message.success(res.message)
                    this.$emit('refresh')
                }).catch(e => console.error(e)).finally(() => this.loading--)
            }).catch(e => console.error(e))
        }
    }
}
</script>